<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
    <linK rel="stylesheet" href="../static/css/mainPage/mainPage.css" th:href="@{/css/mainPage/mainPage.css}">
    <linK rel="stylesheet" href="../static/css/nav/nav.css" th:href="@{/css/nav/nav.css}">
</head>

<body>
    <span class="alert"></span>

    <div class="top-bar-first" th:replace="layout/mainPage::topBarFirst"></div>
    <div class="top-bar-second" th:replace="fragments/top-bar-second::topBarSecond"></div>
    <div class="search" th:replace="layout/mainPage::searchBack"></div>

    <!-- 主内容与侧边栏 -->
    <div class="content">
        <div class="content-left">
            <div class="search-container"
                th:if="${postList != null and postList.size() > 0 or userList != null and userList.size() > 0}">
                <div class="search-tip-title">以下是关于"
                    <span class="search-keyword" th:text="${searchString}"></span>"的相关搜索
                </div>
                <div class="search-content">
                    <!--渲染用户列表-->
                    <div class="user-text" th:if="${userList != null and userList.size() > 0}">用户</div>

                    <div class="user-contents" th:each="user:${userList}">
                        <div class="feed-card">
                            <span class="news-userId" style="display:none" th:text="${user.userId}"></span>
                            <div>
                                <img class="userAvatar" th:src="${user.avatar}" th:data-user-id="${user.userId}">
                            </div>
                            <div class="userName" th:text="${user.userName}"></div>
                            <button class="followBtn">关注</button>
                        </div>
                    </div>
                    <!--渲染文章列表-->
                    <div class="posts-text" th:if="${postList != null and postList.size() > 0}">文章</div>

                    <div class="news-contents" th:each="post:${postList}">
                        <div class="feed-card">
                            <span class="news-postId" style="display:none" th:text="${post.postId}"></span>
                            <span class="news-userId" style="display:none" th:text="${post.userId}"></span>
                            <a class="title" th:text="${post.title}"></a>
                            <div class="feed-card-bottom">
                                <span class="comments-num"><span th:text="${post.commentCount}"></span>评论</span>
                                <span class="post-date" th:text="${post.createdTime}"></span>
                            </div>
                        </div>
                        <div class="news-image" th:if="${post.coverImage}">
                            <a>
                                <img th:src="${post.coverImage}" alt="">
                            </a>
                        </div>
                    </div>

                </div>

            </div>

            <div class="search-container"
                th:if="${(postList == null or postList.size() == 0) and (userList == null or userList.size() == 0)}">
                <div class="notFound">没有找到关于"
                    <span class="notFoundString" th:text="${searchString}"></span>
                    "的相关搜索
                </div>
            </div>
        </div>
        <div class="content-right" th:replace="layout/mainPage::content-right"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../static/js/mainPage.js" th:src="@{/js/mainPage.js}"></script>

    <script th:inline="javascript">
        // 通过Thymeleaf表达式获取userInfo
        var userInfo = /*[[${userInfo}]]*/ null;
        console.log(userInfo);
        if (userInfo) {
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('isLoggedIn', 'true');
            console.log('用户信息已存储到LocalStorage');
        }
        // 通过Thymeleaf表达式获取posts
        // var posts = /*[[${posts}]]*/ null;
        // if (posts) {
        //     localStorage.setItem('posts', JSON.stringify(posts));
        //     console.log('posts已存储到LocalStorage');
        // }
        var posts = /*[[${postList}]]*/ null;
        console.log(posts);
        var users = /*[[${userList}]]*/ null;
        console.log(users);
        var hasMore =/*[[${hasMore}]]*/ null;
        console.log(hasMore);
        if (posts.length > 0) {
            truncateTitles({ selector: '.title', maxLength: 30 });

        }
    </script>
    <script src="../static/js/nav.js" th:src="@{/js/nav.js}"></script>

</body>

</html>